<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <title>康小庄的京东商城</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>

<body class="pg">
<div class="page" id="app">
    <div id="mallPage" class=" mallist tmall- page-not-market ">

        <!-- 头部搜索 -->
        <div id="header" class=" header-list-app">
            <div class="headerLayout">
                <div class="headerCon ">
                    <!-- Logo-->
                    <h1 id="mallLogo">
                        <img src="images/jdlogo.png" alt="">
                    </h1>

                    <div class="header-extra">

                        <!--搜索-->
                        <div id="mallSearch" class="mall-search">
                            <form name="searchTop" class="mallSearch-form clearfix">
                                <fieldset>
                                    <legend>天猫搜索</legend>
                                    <div class="mallSearch-input clearfix">
                                        <div class="s-combobox" id="s-combobox-685">
                                            <div class="s-combobox-input-wrap">
                                                <input v-model="keyword" type="text" autocomplete="off" value="dd"
                                                       id="mq"
                                                       class="s-combobox-input" aria-haspopup="true">
                                            </div>
                                        </div>
                                        <button @click.prevent="searchPage" type="submit" id="searchbtn">搜索</button>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品详情页面 -->
        <div id="content">
            <div class="main">
                <!-- 品牌分类 -->
                <form class="navAttrsForm">
                    <div class="attrs j_NavAttrs" style="display:block">
                        <div class="brandAttr j_nav_brand">
                            <div class="j_Brand attr">
                                <div class="attrKey">
                                    品牌
                                </div>
                                <div class="attrValues">
                                    <ul class="av-collapse row-2">
                                        <li><a href="#"> 康小庄 </a></li>
                                        <li><a href="#"> Java </a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- 排序规则 -->
                <div class="filter clearfix">
                    <a class="fSort fSort-cur">综合<i class="f-ico-arrow-d"></i></a>
                    <a class="fSort">人气<i class="f-ico-arrow-d"></i></a>
                    <a class="fSort">新品<i class="f-ico-arrow-d"></i></a>
                    <a class="fSort">销量<i class="f-ico-arrow-d"></i></a>
                    <a class="fSort">价格<i class="f-ico-triangle-mt"></i><i class="f-ico-triangle-mb"></i></a>
                </div>

                <!-- 商品详情 -->
                <div class="view grid-nosku">

                    <div class="product" v-for="item in results">
                        <div class="product-iWrap">
                            <!--商品封面-->
                            <div class="productImg-wrap">
                                <a class="productImg">
                                    <img :src="item.src">
                                </a>
                            </div>
                            <!--价格-->
                            <p class="productPrice">
                                <em>{{item.price}}</em>
                            </p>
                            <!--标题-->
                            <p class="productTitle">
                                <a v-html="item.name"></a>
                            </p>
                            <!-- 店铺名 -->
                            <div class="productShop">
                                <span>店铺： 康小庄 </span>
                            </div>
                            <!-- 成交信息 -->
                            <p class="productStatus">
                                <span>月成交<em>999笔</em></span>
                                <span>评价 <a>3</a></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<script src="js/vue.min.js"></script>-->
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            keyword: '',  //搜索关键字
            results: [],  //搜索结果
        },
        methods: {
            searchPage() {
                var keyword = this.keyword;
                console.log(keyword)
                axios.get("search/" + keyword + "/1/10").then(res => {
                    console.log(res.data)
                    this.results = res.data;
                })
            }
        }
    })
</script>
<style>
    /*** uncss> filename: http://localhost:9090/css/global.css ***/
    body, button, fieldset, form, h1, input, legend, li, p, ul {
        margin: 0;
        padding: 0
    }

    body, button, input {
        font: 12px/1.5 tahoma, arial, "\5b8b\4f53";
        -ms-overflow-style: scrollbar
    }

    button, h1, input {
        font-size: 100%
    }

    em {
        font-style: normal
    }

    ul {
        list-style: none
    }

    a {
        text-decoration: none
    }

    a:hover {
        text-decoration: underline
    }

    legend {
        color: #000
    }

    fieldset, img {
        border: 0
    }

    #content, #header {
        margin-left: auto;
        margin-right: auto
    }

    @font-face {
        font-family: mui-global-iconfont;
        src: url(//at.alicdn.com/t/font_1401963178_8135476.eot);
        src: url(//at.alicdn.com/t/font_1401963178_8135476.eot?#iefix) format('embedded-opentype'), url(//at.alicdn.com/t/font_1401963178_8135476.woff) format('woff'), url(//at.alicdn.com/t/font_1401963178_8135476.ttf) format('truetype'), url(//at.alicdn.com/t/font_1401963178_8135476.svg#iconfont) format('svg')
    }

    #mallPage {
        width: auto;
        min-width: 990px;
        background-color: transparent
    }

    #content {
        width: 990px;
        margin: auto
    }

    #mallLogo {
        float: left;
        z-index: 9;
        padding-top: 28px;
        width: 280px;
        height: 64px;
        line-height: 64px;
        position: relative
    }

    .page-not-market #mallLogo {
        width: 400px
    }

    .clearfix:after, .clearfix:before, .headerCon:after, .headerCon:before {
        display: table;
        content: "";
        overflow: hidden
    }

    #mallSearch legend {
        display: none
    }

    .clearfix:after, .headerCon:after {
        clear: both
    }

    .clearfix, .headerCon {
        zoom: 1
    }

    #mallPage #header {
        margin-top: -30px;
        width: auto;
        margin-bottom: 0;
        min-width: 990px;
        background: #fff
    }

    #header {
        height: 122px;
        margin-top: -26px !important;
        background: #fff;
        min-width: 990px;
        width: auto !important;
        position: relative;
        z-index: 1000
    }

    #mallSearch #mq, #mallSearch fieldset, .mallSearch-input {
        position: relative
    }

    .headerLayout {
        width: 990px;
        padding-top: 26px;
        margin: 0 auto
    }

    .header-extra {
        overflow: hidden
    }

    #mallSearch {
        float: right;
        padding-top: 25px;
        width: 390px;
        overflow: hidden
    }

    .mallSearch-form {
        border: solid #FF0036;
        border-width: 3px 0 3px 3px
    }

    .mallSearch-input {
        background: #fff;
        height: 30px
    }

    #mallSearch #mq {
        color: #000;
        margin: 0;
        z-index: 2;
        width: 289px;
        height: 20px;
        line-height: 20px;
        padding: 5px 3px 5px 5px;
        outline: 0;
        border: none;
        font-weight: 900;
        background: url() repeat-x;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box
    }

    #mallSearch button {
        position: absolute;
        right: 0;
        top: 0;
        width: 90px;
        border: 0;
        font-size: 16px;
        letter-spacing: 4px;
        cursor: pointer;
        color: #fff;
        background-color: #FF0036;
        height: 30px;
        overflow: hidden;
        font-family: '\5FAE\8F6F\96C5\9ED1', arial, "\5b8b\4f53"
    }

    #mallSearch .s-combobox {
        height: 30px
    }

    #mallSearch .s-combobox .s-combobox-input:focus {
        outline: 0
    }

    button::-moz-focus-inner {
        border: 0;
        padding: 0;
        margin: 0
    }

    .page-not-market #mallSearch {
        width: 540px !important
    }

    .page-not-market #mq {
        width: 439px !important
    }

    /*** uncss> filename: http://localhost:9090/css/test.css ***/
    #mallSearch {
        float: none
    }

    .page-not-market #mallLogo {
        width: 280px
    }

    .header-list-app #mallSearch {
        width: 448px !important
    }

    .header-list-app #mq {
        width: 347px !important
    }

    @media (min-width: 1210px) {
        #header .headerCon, #header .headerLayout, .main {
            width: 1190px !important
        }

        .header-list-app #mallSearch {
            width: 597px !important
        }

        .header-list-app #mq {
            width: 496px !important
        }
    }

    @media (min-width: 600px) and (max-width: 800px) and (orientation: portrait) {
        .pg .page {
            min-width: inherit !important
        }

        .pg #mallPage, .pg #mallPage #header {
            min-width: 740px !important
        }

        .pg #header .headerCon, .pg #header .headerLayout, .pg .main {
            width: 740px !important
        }

        .pg #mallPage #mallLogo {
            width: 260px
        }

        .pg #header {
            min-width: inherit
        }

        .pg #mallSearch .mallSearch-input {
            padding-right: 95px
        }

        .pg #mallSearch .s-combobox {
            width: 100% !important
        }

        .pg #mallPage .header-list-app #mallSearch {
            width: auto !important
        }

        .pg #mallPage .header-list-app #mallSearch #mq {
            width: 100% !important;
            padding: 5px 0 5px 5px
        }
    }

    i {
        font-style: normal
    }

    .main, .page {
        position: relative
    }

    .page {
        overflow: hidden
    }

    @font-face {
        font-family: tm-list-font;
        src: url(//at.alicdn.com/t/font_1442456441_338337.eot);
        src: url(//at.alicdn.com/t/font_1442456441_338337.eot?#iefix) format('embedded-opentype'), url(//at.alicdn.com/t/font_1442456441_338337.woff) format('woff'), url(//at.alicdn.com/t/font_1442456441_338337.ttf) format('truetype'), url(//at.alicdn.com/t/font_1442456441_338337.svg#iconfont) format('svg')
    }

    ::selection {
        background: rgba(0, 0, 0, .1)
    }

    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, .3)
    }

    b {
        font-weight: 400
    }

    .page {
        background: #fff;
        min-width: 990px
    }

    #content {
        margin: 0 !important;
        width: 100% !important
    }

    .main {
        margin: auto;
        width: 990px
    }

    .main img {
        -ms-interpolation-mode: bicubic
    }

    .fSort i {
        background: url(//img.alicdn.com/tfs/TB1XClLeAY2gK0jSZFgXXc5OFXa-165-206.png) 9999px 9999px no-repeat
    }

    #mallSearch .s-combobox {
        width: auto
    }

    ::-ms-clear, ::-ms-reveal {
        display: none
    }

    .attrKey {
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .attrs {
        border-top: 1px solid #E6E2E1
    }

    .attrs a {
        outline: 0
    }

    .attr {
        background-color: #F7F5F5;
        border-color: #E6E2E1 #E6E2E1 #D1CCC7;
        border-style: solid solid dotted;
        border-width: 0 1px 1px
    }

    .attr ul:after, .attr:after {
        display: block;
        clear: both;
        height: 0;
        content: ' '
    }

    .attrKey {
        float: left;
        padding: 7px 0 0;
        width: 10%;
        color: #B0A59F;
        text-indent: 13px
    }

    .attrKey {
        display: block;
        height: 16px;
        line-height: 16px;
        overflow: hidden
    }

    .attrValues {
        position: relative;
        float: left;
        background-color: #FFF;
        width: 90%;
        padding: 4px 0 0;
        overflow: hidden
    }

    .attrValues ul {
        position: relative;
        margin-right: 105px;
        margin-left: 25px
    }

    .attrValues ul.av-collapse {
        overflow: hidden
    }

    .attrValues li {
        float: left;
        height: 22px;
        line-height: 22px
    }

    .attrValues li a {
        position: relative;
        color: #806F66;
        display: inline-block;
        padding: 1px 20px 1px 4px;
        line-height: 20px;
        height: 20px;
        white-space: nowrap
    }

    .attrValues li a:hover {
        color: #ff0036;
        text-decoration: none
    }

    .brandAttr .attr {
        border: 2px solid #D1CCC7;
        margin-top: -1px
    }

    .brandAttr .attrKey {
        padding-top: 9px
    }

    .brandAttr .attrValues {
        padding-top: 6px
    }

    .brandAttr .av-collapse {
        overflow: hidden;
        max-height: 60px
    }

    .brandAttr li {
        margin: 0 8px 8px 0
    }

    .brandAttr li a {
        text-overflow: ellipsis;
        overflow: hidden
    }

    .navAttrsForm {
        position: relative
    }

    .relKeyTop {
        padding: 4px 0 0;
        margin-left: -13px;
        height: 16px;
        overflow: hidden;
        width: 100%
    }

    .relKeyTop li {
        display: inline-block;
        border-left: 1px solid #ccc;
        line-height: 1.1;
        padding: 0 12px
    }

    .relKeyTop li a {
        color: #999
    }

    .relKeyTop li a:hover {
        color: #ff0036;
        text-decoration: none
    }

    .filter i {
        display: inline-block;
        overflow: hidden
    }

    .filter {
        margin: 10px 0;
        padding: 5px;
        position: relative;
        z-index: 10;
        background: #faf9f9;
        color: #806f66
    }

    .filter i {
        position: absolute
    }

    .filter a {
        color: #806f66;
        cursor: pointer
    }

    .filter a:hover {
        color: #ff0036;
        text-decoration: none
    }

    .fSort {
        float: left;
        height: 22px;
        line-height: 20px;
        line-height: 24px \9;
        border: 1px solid #ccc;
        background-color: #fff;
        z-index: 10
    }

    .fSort {
        position: relative
    }

    .fSort {
        display: inline-block;
        margin-left: -1px;
        overflow: hidden;
        padding: 0 15px 0 5px
    }

    .fSort:hover, a.fSort-cur {
        color: #ff0036;
        background: #F1EDEC
    }

    .fSort i {
        top: 6px;
        right: 5px;
        width: 7px;
        height: 10px;
        line-height: 10px
    }

    .fSort .f-ico-arrow-d {
        background-position: -22px -23px
    }

    .fSort-cur .f-ico-arrow-d, .fSort:hover .f-ico-arrow-d {
        background-position: -30px -23px
    }

    i.f-ico-triangle-mb, i.f-ico-triangle-mt {
        border: 4px solid transparent;
        height: 0;
        width: 0
    }

    i.f-ico-triangle-mt {
        border-bottom: 4px solid #806F66;
        top: 2px
    }

    i.f-ico-triangle-mb {
        border-top: 4px solid #806F66;
        border-width: 3px \9;
        right: 6px \9;
        top: 12px
    }

    :root i.f-ico-triangle-mb {
        border-width: 4px \9;
        right: 5px \9
    }

    i.f-ico-triangle-mb, i.f-ico-triangle-mt {
        border: 4px solid transparent;
        height: 0;
        width: 0
    }

    i.f-ico-triangle-mt {
        border-bottom: 4px solid #806F66;
        top: 2px
    }

    i.f-ico-triangle-mb {
        border-top: 4px solid #806F66;
        border-width: 3px \9;
        right: 6px \9;
        top: 12px
    }

    :root i.f-ico-triangle-mb {
        border-width: 4px \9;
        right: 5px \9
    }

    .view:after {
        clear: both;
        content: ' '
    }

    .productImg, .productPrice em b {
        vertical-align: middle
    }

    .product {
        position: relative;
        float: left;
        padding: 0;
        margin: 0 0 20px;
        line-height: 1.5;
        overflow: visible;
        z-index: 1
    }

    .product:hover {
        overflow: visible;
        z-index: 3;
        background: #fff
    }

    .product-iWrap {
        position: absolute;
        background-color: #fff;
        margin: 0;
        padding: 4px 4px 0;
        font-size: 0;
        border: 1px solid #f5f5f5;
        border-radius: 3px
    }

    .product-iWrap * {
        font-size: 12px
    }

    .product:hover .product-iWrap {
        height: auto;
        margin: -3px;
        border: 4px solid #ff0036;
        border-radius: 0;
        -webkit-transition: border-color .2s ease-in;
        -moz-transition: border-color .2s ease-in;
        -ms-transition: border-color .2s ease-in;
        -o-transition: border-color .2s ease-in;
        transition: border-color .2s ease-in
    }

    .productPrice, .productShop, .productStatus, .productTitle {
        display: block;
        overflow: hidden;
        margin-bottom: 3px
    }

    .view:after {
        display: block
    }

    .view {
        margin-top: 10px
    }

    .view:after {
        height: 0
    }

    .productImg-wrap {
        display: table;
        table-layout: fixed;
        height: 210px;
        width: 100%;
        padding: 0;
        margin: 0 0 5px
    }

    .productImg-wrap a, .productImg-wrap img {
        max-width: 100%;
        max-height: 210px
    }

    .productImg {
        display: table-cell;
        width: 100%;
        text-align: center
    }

    .productImg img {
        display: block;
        margin: 0 auto
    }

    .productPrice {
        font-family: arial, verdana, sans-serif !important;
        color: #ff0036;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        margin: 0 0 5px;
        letter-spacing: normal;
        overflow: inherit !important;
        white-space: nowrap
    }

    .productPrice * {
        height: 30px
    }

    .productPrice em {
        float: left;
        font-family: arial;
        font-weight: 400;
        font-size: 20px;
        color: #ff0036
    }

    .productPrice em b {
        margin-right: 2px;
        font-weight: 700;
        font-size: 14px
    }

    .productTitle {
        display: block;
        color: #666;
        height: 14px;
        line-height: 12px;
        margin-bottom: 3px;
        word-break: break-all;
        font-size: 0;
        position: relative
    }

    .productTitle * {
        font-size: 12px;
        font-family: \5FAE\8F6F\96C5\9ED1;
        line-height: 14px
    }

    .productTitle a {
        color: #333
    }

    .productTitle a:hover {
        color: #ff0036 !important
    }

    .productTitle a:visited {
        color: #551A8B !important
    }

    .product:hover .productTitle {
        height: 14px
    }

    .productShop {
        position: relative;
        height: 22px;
        line-height: 20px;
        margin-bottom: 5px;
        color: #999;
        white-space: nowrap;
        overflow: visible
    }

    .productStatus {
        position: relative;
        height: 32px;
        border: none;
        border-top: 1px solid #eee;
        margin-bottom: 0;
        color: #999
    }

    .productStatus span {
        float: left;
        display: inline-block;
        border-right: 1px solid #eee;
        width: 39%;
        padding: 10px 1px;
        margin-right: 6px;
        line-height: 12px;
        text-align: left;
        white-space: nowrap
    }

    .productStatus a, .productStatus em {
        margin-top: -8px;
        font-family: arial;
        font-size: 12px;
        font-weight: 700
    }

    .productStatus em {
        color: #b57c5b
    }

    .productStatus a {
        color: #38b
    }

    .productImg-wrap {
        position: relative
    }

    .product-iWrap {
        min-height: 98%;
        width: 210px
    }

    .view {
        padding-left: 5px;
        padding-right: 5px
    }

    .view {
        width: 1023px
    }

    .view .product {
        width: 220px;
        margin-right: 33px
    }

    @media (min-width: 1210px) {
        .view {
            width: 1210px;
            padding-left: 5px;
            padding-right: 5px
        }

        .view .product {
            width: 220px;
            margin-right: 20px
        }
    }

    @media (min-width: 600px) and (max-width: 800px) and (orientation: portrait) {
        .view {
            width: 775px;
            padding-left: 5px;
            padding-right: 5px
        }

        .view .product {
            width: 220px;
            margin-right: 35px
        }
    }

    .product {
        height: 372px
    }

    .grid-nosku .product {
        height: 333px
    }
</style>
</body>
</html>